<template>
	<view class="flex">
		<view class="flex1 flex" v-for="(item,index) in tipList" :key="index">
			<cross-line v-if="index != 0" :color="item" class="flex1"></cross-line>
			<view v-else class="flex1"></view>
			<view @tap="change(index)" :style="{backgroundColor:item,boxShadow: `0 0 ${checked == index?15:0}rpx ${item};`}" class="circle"></view>
			<cross-line v-if="index != tipList.length-1" :color="tipList[index+1]" class="flex1"></cross-line>
			<view v-else class="flex1"></view>
		</view>
		<!-- 		<cross-line class="flex1"></cross-line>
		<view class="circle"></view>
		<cross-line class="flex1"></cross-line>
		<view class="circle"></view> -->
	</view>
</template>
<script>
	import crossLine from "@/components/ui/tg-cross-line.vue"
	export default {
		components: {
			crossLine
		},
		props: {
			tip: {
				default: () => ['#63C3FF', '#FF6B6B', '#D1D1D1']
			},
			check: {
				default: 0
			}
		},
		computed: {
			tipList:{
				get(){
					return this.tip
				}
			},
			checked:{
				get() {

					this.checked_ = this.check
					console.log('this.checked_ ==' + this.checked_)
					return this.checked_

				},
				set(newValue){
					this.$emit("changeCheck",{index:newValue})
				}
			}
		},
		data() {
			return {
				checked_: null
			}
		},
		methods: {
			change(index){
				this.checked = index
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.circle {
		transition: box-shadow 0.5s;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;

		/* 		background-color: #02C9FC; */
	}
</style>
